<template>
  <div class="tag_list">

    <a-card style="margin-top: 10px;">
      <div class="list_title">
        <span>用户标签列表</span>
<!--        <a-button type="primary" class="set_up" @click="onSetUpReport" icon="plus" v-action:add="'report'">新建</a-button>-->
      </div>
      <a-table
        :columns="columns"
        :data-source="tagList"
        :loading="loading.table"
        :scroll="{x: true}"
        rowKey="id"
        style="margin-top:10px; margin-bottom:5px;"
      >
        <template slot="name" slot-scope="text, record">
          <span v-if="record.type === 'category'">
            {{ record.displayName }}
          </span>
          <div v-else class="tag_name_wrapper">
            <a class="tag_display_name" @click="lookDetails(record)">{{ record.displayName }}</a>
            <p class="tag_name">{{ record.name }}</p>
          </div>
        </template>
        <template slot="updateStatus" slot-scope="text, record">
          <div>
            <p class="task_status">{{ record.taskStatus }}</p>
            <p class="task_status_date">{{ record.taskUpdateAt ? record.taskUpdateAt : "" }}</p>
          </div>
        </template>
        <span slot="action" slot-scope="text, record">
          <a-row>
            <a v-if="record.type !== 'category'" @click="lookDetails(record)">查看</a>
          </a-row>
        </span>
      </a-table>
    </a-card>
  </div>
</template>

<script>

import {mapActions} from "vuex";

const columns = [
  {
    title: '标签名称',
    dataIndex: 'displayName',
    width: 300,
    scopedSlots: { customRender: 'name'}
  },
  {
    title: '标签数据类型',
    dataIndex: 'displayDataType',
    width: 130
  },
  {
    title: '覆盖人数',
    dataIndex: 'users',
    width: 150
  },
  {
    title: '标签值',
    dataIndex: 'values',
    width: 300,
  },
  {
    title: '最新版本计算状态',
    dataIndex: 'updateStatus',
    width: 200,
    scopedSlots: {customRender: 'updateStatus'},
  },
  {
    title: '更新方式',
    dataIndex: 'displayUpdateType',
    width: 100
  },
  {
    title: '标签创建方式',
    dataIndex: 'displayType',
    width: 150
  },
  {
    title: '创建者',
    dataIndex: 'creatorName',
    width: 100
  },
  {
    title: '修改时间',
    dataIndex: 'updatedAt',
    width: 180
  },
  {
    title: '创建时间',
    dataIndex: 'createdAt',
    width: 180
  },

  {
    title: '操作',
    fixed: 'right',
    scopedSlots: {customRender: 'action'},
  }
];

const DATA_TYPE = {
  "0":"字符串",
  "1":"数值",
  "2":"布尔",
};

const UPDATE_TYPE = {
  "0":"自动更新",
  "1":"手动更新",
}

const TAGE_TYPE = {
  "0":"自定义SQL",
  "1":"事件属性配置",
}

export default {
  name: "TagList",
  computed: {},
  data (){
    return {
      columns,
      loading: {
        table: false
      },
      tagList:[]
    }
  },
  methods: {
    ...mapActions('userTagManage', ['getUserTagList', 'getUserTagTaskStatusList']),
    initPageData (){
      this.getUserTags()
    },
    buildTableData (dataList){
      if ( !dataList || dataList.length < 1){
        this.tagList = []
        return
      }
      const result = []
      let categories = {}
      dataList.map(item =>{
        const dataType = DATA_TYPE[String(item.dataType)]
        item.displayDataType = typeof dataType === 'string' ? dataType : ""
        const updateType = UPDATE_TYPE[String(item.updateType)]
        item.displayUpdateType = typeof updateType === 'string' ? updateType : ""
        const type = TAGE_TYPE[String(item.type)]
        item.displayType = typeof type === 'string' ? type : ""
        const category = item.tagCategory
        if (typeof category === 'object' && typeof category.name === 'string'){
          if (categories[category.id]){
            categories[category.id].data.push(item)
          }else {
            categories[category.id] = {
              id: "category_"+category.id,
              name: category.name,
              data:[item]
            }
          }
        }
        switch (item.status){
          case 0:
            item.taskStatus = '失败'
            break;
          case 1:
            item.taskStatus = '成功'
            break;
          case 2:
            item.taskStatus = '执行中'
        }
        if (typeof item.result === 'string' && item.result !== ""){
          let str = ''
          const result = JSON.parse(item.result)
          const total = result.total
          if (total === 0){
            str = '标签值为空'
          }else {
            str = '共 ' + total + ' 个值, 分别为: ' + result.values.join(',')
            if(total > 10){
              str = str + "..."
            }
          }
          item.values = str

        }
      })
      for (let i in categories){
        result.push({
          id: categories[i].id,
          displayName: categories[i].name,
          type: "category",
          children: categories[i].data
        })
      }
      this.tagList = result

    },
    getUserTags (){
      this.loading.table = true
      this.getUserTagList().then(res =>{
        this.buildTableData(res)
      }).catch(err =>{
        console.error(err)
        this.$message.error('获取用户标签列表失败，原因：' + err.msg + '!')
      }).finally(()=>{
        this.loading.table = false
      })
    },
    lookDetails(row){
      this.$router.push({name:"UserTagDetail", params:{record: row}, query:{tagId: row.id}})
    }

  },
  mounted() {
    this.initPageData()
  }
}
</script>

<style scoped>
.tag_name_wrapper {
  margin-left: 50px;
}



.tag_name {
  font-size: 10px;
  color: rgba(62, 70, 71, 0.75);
  margin-top: 1px;
  margin-bottom: 0;
}

.task_status {
  margin-bottom: 3px;
}

.task_status_date {
  font-size: 10px;
  color: rgba(62, 70, 71, 0.75);
  margin-bottom: 0;
}

.tag_list{
  width: 100%;
  height: 100%;
}

.set_up{
  float: right;
}

.ant-drawer>>>.ant-drawer-body{
  height: calc(100% - 55px);
}

.ant-form{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.submit_style{
  margin-bottom: 0;
  flex: 1;
}

.submit_style>>>.ant-col.ant-col-18.ant-form-item-control-wrapper{
  width: 100%;
  height: 100%;
}

.submit_style>>>.ant-form-item-control{
  display: flex;
  height: 100%;
  align-items: flex-end;
}

.submit_style>>>span.ant-form-item-children{
  width: 100%;
}

.list_title{
  display: flex;
  justify-content: space-between;
}


.list_title span {
  display: block;
  float: left;
  margin-bottom: 0;
  padding-right: 12px;
  color: rgba(0,0,0,.85);
  font-weight: 500;
  font-size: 16px;
  line-height: 32px;
}

.ant-table-wrapper>>>span.ant-table-row-indent{
  padding-left: 0;
  width: 0;
  height: 0;
  display: none;
  visibility: hidden;
}

.ant-table-wrapper>>>span.ant-table-row-expand-icon{
  padding-left: 0;
  width: 0;
  height: 0;
  display: none;
  visibility: hidden;
}


.text-wrapper {
  white-space: pre-wrap;
}
</style>
